<template>
  <div class="main">
    <el-alert :closable="false" :title="'数据一共' + choiceData.counts + '条'" type="info" show-icon
      style="margin-bottom: 15px;"></el-alert>
    <el-table :data="choiceData.items" style="width: 100%;" :header-cell-style="{
      borderBottom: '2px solid #e8e8e8', backgroundColor: '#fafafa'
    }">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template v-slot="{ row }">
          {{ row.questionType == '1' ? '单选' : row.questionType == '2' ? '多选' : '简答' }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280" ref="question">
        <template v-slot="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template v-slot="{ row }">
          {{ row.addDate.substring(0, 19).replace('T', ' ') }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="80">
        <template v-slot="{ row }">
          {{ row.difficulty == '1' ? '简单' : row.difficulty == '2' ? '一般' : '困难' }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template v-slot="{ row }">
          {{ row.chkState == '0' ? '待审核' : row.chkState == '1' ? '已审核' : '已拒绝' }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="" label="发布状态" width="150">
        <template v-slot="{ row }">
          {{ row.chkState == '0' || row.chkState == '2' ? '待发布' : row.publishState == 1 ? '已发布' : '已下架' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template v-slot="{ row }">
          <!-- 点击预览弹出框 -->
          <el-button @click="handleClick(row)" type="text" size="small">预览</el-button>
          <!--  已审核和已拒绝不能审核-->
          <el-button @click="audit(row)" type="text" size="small"
            :disabled="row.chkState == '1' || row.chkState == '2'">审核</el-button>
          <!-- // 已发布状态不能点击修改 -->
          <el-button type="text" size="small" :disabled="row.publishState == '1'" @click="$router.push(`new?id=${row.id}`)">修改</el-button>
          <el-button type="text" @click="open(row)" size="small">
            {{ row.publishState == 0 ? '上架' : '下架' }}
          </el-button>
          <!-- <el-button type="text" size="small">删除</el-button> -->
          <el-button type="text" @click="deleteTopic(row)" size="small" :disabled="row.publishState == '1'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- // 预览弹框 -->
    <questionsPreviewVue :dialogVisible.sync="dialogVisible" :detailData="detailData" :previewData="previewData"></questionsPreviewVue>
    <!-- 审核弹框 -->
    <questionsCheck @on="refresh" :auditDataId="auditData.id" :dialogVisibleAudit.sync="dialogVisibleAudit">
    </questionsCheck>
  </div>
</template>
<script>
import { detail, choicePublish, remove } from '@/api/hmmm/questions'
import questionsPreviewVue from './questions-preview.vue'
import questionsCheck from './questions-check.vue'

export default {
  components: {
    questionsPreviewVue,
    questionsCheck
  },
  props: {
    choiceData: {
      type: Object
    }
  },
  data () {
    return {
      // 预览弹框
      dialogVisible: false,
      previewData: {},
      // 审核弹框
      dialogVisibleAudit: false,
      auditData: {},
      // 上下架
      groundingData: {
        id: '',
        publishState: ''
      },
      // 删除
      deleteData: {
        id: ''
      },
      detailData: {}
    }
  },
  methods: {
    // 预览弹框
    handleClick (row) {
      this.dialogVisible = true
      this.previewData = row
      detail(row)
        .then(res => {
          this.detailData = res.data
        })
      console.log(this.detailData)
    },
    // 审核
    audit (row) {
      this.dialogVisibleAudit = true
      this.auditData = row
    },
    refresh () {
      this.$emit('on')
    },
    // 上下架
    open (row) {
      this.$confirm(`您确认${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 给上下架请求添加数据
        this.groundingData.id = row.id
        this.groundingData.publishState = row.publishState === 0 ? 1 : 0
      }).then(() => {
        // 调用接口
        choicePublish(this.groundingData)
        // 提示用户
          .then(() => {
            this.$message({
              type: 'success',
              message: `${row.publishState === 0 ? '上架' : '下架'}成功!`
            })
            // 刷新页面
            this.$emit('on')
          })
      })
    },
    // 删除
    deleteTopic (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData.id = row.id
      }).then(() => {
        remove(this.deleteData)
          .then(() => {
            this.$message.success('删除成功')
            // 刷新页面
            this.$emit('on')
          })
      })
    }
  }
}
</script>
<style  lang="scss" scoped></style>
